<template>
	<view class="page pd-30" v-if="Object.keys(detailInfo).length > 0">
		<view class="card pd-20">
			<view class="ft1 mb-20">项目视频（{{detailInfo.videos.length }}）</view>

			<view class="vedio">
				<view class="vedioItem " v-for="item in detailInfo.videos" :key="item.id" @click="openVedio(item.id)">
					<image style="border-radius: 40rpx" class="bg wh-100" :src="item.cover" mode="aspectFill"></image>
					<image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
					<view class="card flex pd-12">
						<view class="avtor">
							<image class="wh-56" style="border-radius: 50%;" :src="item.sale_info.avatar"></image>
						</view>
						<view class="desc ml-12">
							<view style="width: 200rpx;" class="ft1 ft-lue">{{ item.product_info.name }}</view>
							<view style="width: 200rpx;" class="ft3 ft-lue flex">
								<text v-for="tag in item.product_info.tags" :key="tag.id">{{ "#"+tag.name }}</text>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="card2 pd-20 mt-20">
			<view class="ft1 mb-20">图片（{{detailInfo.images.length }}）</view>
			<view class="imgGroup flex mt-20">
				<up-album :urls="detailInfo.images" autoWrap></up-album>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		utils
	} from "@/utils/utils.js";
	import {
		api
	} from "@/utils/api.js";


	const detailInfo = ref({})
	const getProductDetailData = (id) => {
		utils
			.request(
				api.getProductFileDetail, {
					id: id,
				},
				"get"
			)
			.then((res) => {
				detailInfo.value = res.data.info;
				console.log(detailInfo.value, "产品图片视频详情信息》》》》》》");


			});
	}


	const openVedio = (id) => {
		uni.reLaunch({
			url: `/pages/category/category?id=${id}&isReback=${true}`
		})
	}

	onLoad((options) => {
		if (options.id) {
			getProductDetailData(options.id)
		}
	})
</script>

<style lang="scss" scoped>
	.card {
		width: 690rpx;
		//height: 658rpx;
		background: #F8F8F8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.vedio {
			display: flex;
			flex-wrap: wrap;

			.vedioItem {
				width: 314rpx;
				height: 614rpx;

				border-radius: 40rpx 40rpx 40rpx 40rpx;
				margin-left: 6rpx;
				margin-bottom: 16rpx;
				position: relative;

				.bg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.play {
					position: absolute;
					top: 297rpx;
					left: 147rpx;
					z-index: 3;
				}

				.card {
					width: 294rpx;
					height: 82rpx;
					background: #ffffff;
					border-radius: 44rpx;
					position: absolute;
					bottom: 10rpx;
					left: 10rpx;
					z-index: 10;

					.huiyuan {
						width: 22rpx;
						height: 20rpx;
						position: absolute;
						bottom: 10rpx;
						left: 44rpx;
						z-index: 12;
					}
				}
			}
		}
	}

	.card2 {
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 40rpx;

		.group {
			width: 148rpx;
			height: 186rpx;
			border-radius: 40rpx;
		}
	}
</style>